<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">

    <router-link to="/account">account</router-link>
    <!--这是将template里面的组件显示出来-->
    <router-view></router-view>

</div>
<template id="tpl">
    <div>
       <h1>这是account组件</h1>

        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
    </div>
</template>
<script>
    var account={
        template:'#tpl'
    }
    var login={
        template:'<h3>登录</h3>'
    }
    var register={
        template:'<h3>注册</h3>'
    }
    var routerObj = new VueRouter({
        routes:[
            {   path:'/account',
                component:account,
                // 使用 children  实现子路由    同时子路由里面的path  不需要带  /   否则  从根目录开始请求
                children:[    //将  login  和  register  当做  孩子  放在路径里面      嵌套使用
                    {path:'login',component:login},
                    {path:'register',component:register}
                ]
            }
//            {path:'/account/login',component:login},
//            {path:'/account/register',component:register}
        ]

    })

    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router:routerObj
    })
</script>
</body>
</html>